<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .container{
            background-color: rgba(242,242,242);
            max-width: 450px;
            width: 450px;
            overflow: hidden;
        }
        .header {
            background-color: rgb(62, 125, 254);
            text-align: center;
            line-height: 40px;
            color: rgb(255, 255, 255);
            font-size: 18px;
        }
        .my-entrance{
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            margin: 0 8px 0 8px;
        }
        .my-entrance-item {
            height: 50px;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 0 8px 1px #e8e8e8;
            padding: 18px;
            
        }
        .my-entrance-item div {
            height: 25px;
        }
        .div-img{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .div-img img{
            max-width: 30%;
            max-height: 70%;
        }

       .common-entrance{
            width: 100%;
            height: 70px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            box-shadow: 0 0 8px 1px #e8e8e8;


       }
       .common-entrance-item{
            height: 50px;
            border-radius: 5px;
            overflow: hidden;
            padding: 10px 18px 10px 18px;
       }
        .common-entrance-item div{
            text-align: center;
       }
       .div-common-img{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 4px;
       }
       .div-common-img img{
          max-width: 30%;
          max-height: 70%;
       }

       .picture img{
            width: 100%;
            height: 100px;
       }
       
       .class-list{
            background-color: #fff;
            display: flex;
            flex-direction: column;
            box-shadow: 0 0 8px 1px #e8e8e8;
            border-radius: 5px;
            margin: 5px 10px;
            ul{
                display: flex;
                justify-content: space-between;
                list-style-type: none;
                padding-inline-start: 0;
                padding: 7px;
                margin: 0 7px;
                li{
                    margin: 0 8px;
                    font-size: 0.875rem;
                }
                .statusButton{
                    background-color: rgb(78, 154, 251);
                    text-align: center;
                    width: 116px;
                    height: 29px;
                    line-height: 25px;
                    border-radius: 17px;
                    a {
                        text-decoration: none;
                        color: #fff;
                        font-size: 15px;
                        position:relative;
                        padding-left: 18px;
                    }
                    a::before{
                        content: '';
                        background-image: url('./img/status.png');
                        width: 17px;
                        height: 19px;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        position: absolute;
                        left: 0;
                        top: 1px;
                    }
                }
            }
       }
       .class-list .row1{
           padding: 3px;
           margin: 3px;
            li{
                font-size: 20px;
            }
       }
       .class-list .row2{
            font-size: 8px;
            color: rgb(105, 101, 113);
            background-color: rgba(248,248,248);
            .money{
                color: #F77644;
            }
       }
       .class-list .row3{
            color: #F77644;
            li{
                position:relative;
                padding-left: 26px;

            }
            li:before{
                content: '';
                background-image: url('./img/area.png');
                width: 17px;
                height: 19px;
                background-size: 97% 92%;
                background-repeat: no-repeat;
                position: absolute;
                left: 0;
                top: 3px;
            }
       }

       .class-list .row4{
            li{
                position:relative;
                padding-left: 26px;

            }
            li:before{
                content: '';
                background-image: url('./img/spec.png');
                width: 17px;
                height: 19px;
                background-size: 95% 85%;
                background-repeat: no-repeat;
                position: absolute;
                left: 0;
                top: 3px;
            }
       }

        .class-list .row5{
            li{
                position:relative;
                padding-left: 26px;

            }
            li:before{
                content: '';
                background-image: url('./img/time.png');
                width: 17px;
                height: 19px;
                background-size: 95% 85%;
                background-repeat: no-repeat;
                position: absolute;
                left: 0;
                top: 3px;
            }
       }
        .class-list .row6{
            li{
                position:relative;
                padding-left: 26px;

            }
            li:before{
                content: '';
                background-image: url('./img/grade.png');
                width: 17px;
                height: 19px;
                background-size: 95% 85%;
                background-repeat: no-repeat;
                position: absolute;
                left: 0;
                top: 3px;
            }
       }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">文化宫</div>
        <div class="body">
            <div class="some-entrance">
                <div class="my-entrance">
                    <div class="my-entrance-item">
                        <div class="div-img"><img src="./img/my-class.png" alt=""></div>
                        <div>我的班级</div>
                    </div>
                    <div class="my-entrance-item">
                        <div class="div-img"><img src="./img/my-schedule.png" alt=""></div>
                        <div>我的课表</div>
                    </div>
                    <div class="my-entrance-item">
                        <div class="div-img"><img src="./img/student-card.png" alt=""></div>
                        <div>电子学员证</div>
                    </div>
                    <div class="my-entrance-item">
                        <div class="div-img"><img src="./img/my-notice.png" alt=""></div>
                        <div>我的通知</div>
                    </div>
                </div>
                <div class="common-entrance">
                    <div class="common-entrance-item">
                        <div class="div-common-img"><img src="./img/apply-class.png" alt=""></div>
                        <div>培训报名</div>
                    </div>
                    <div class="common-entrance-item">
                        <div class="div-common-img"><img src="./img/apply-act.png" alt=""></div>
                        <div>活动报名</div>
                    </div>
                    <div class="common-entrance-item">
                        <div class="div-common-img"><img src="./img/apply-sky.png" alt=""></div>
                        <div>空中课堂</div>
                    </div>
                    <div class="common-entrance-item">
                        <div class="div-common-img"><img src="./img/coupon.png" alt=""></div>
                        <div>优惠券领取</div>
                    </div>
                </div>
            </div>
            <div class="picture">
                <img src="./img/promotion.png" alt="">
            </div>
            <div class="class-list">
                <ul class="row1">
                    <li>国画初级cscs5</li>
                    <li class="statusButton"><a href="">报名进行中</a></li>
                </ul>
                <ul class="row2">
                    <li>年份：2025</li>
                    <li>学期：春季  </li>
                    <li class="money">&yen;0.01元</li>
                </ul>
                <ul class="row3">
                    <li>区域：文化宫</li>
                </ul>
                <ul class="row4">
                    <li>国画  预招人数：10人</li>
                </ul>
                <ul class="row5">
                    <li>周四 08:00-10:00 舞蹈1+综合排练厅<br/>周五 13:00-14:00 103教室</li>
                </ul>
                <ul class="row6">
                    <li>学员年级段：幼儿 ～ 成人</li>
                </ul>
            </div>

            <div class="class-list">
                <ul class="row1">
                    <li>国画初级cscs5</li>
                    <li class="statusButton"><a href="">报名进行中</a></li>
                </ul>
                <ul class="row2">
                    <li>年份：2025</li>
                    <li>学期：春季  </li>
                    <li class="money">&yen;0.01元</li>
                </ul>
                <ul class="row3">
                    <li>区域：文化宫</li>
                </ul>
                <ul class="row4">
                    <li>国画  预招人数：10人</li>
                </ul>
                <ul class="row5">
                    <li>周四 08:00-10:00 舞蹈1+综合排练厅<br/>周五 13:00-14:00 103教室</li>
                </ul>
                <ul class="row6">
                    <li>学员年级段：幼儿 ～ 成人</li>
                </ul>
            </div>

            <div class="class-list">
                <ul class="row1">
                    <li>国画初级cscs5</li>
                    <li class="statusButton"><a href="">报名进行中</a></li>
                </ul>
                <ul class="row2">
                    <li>年份：2025</li>
                    <li>学期：春季  </li>
                    <li class="money">&yen;0.01元</li>
                </ul>
                <ul class="row3">
                    <li>区域：文化宫</li>
                </ul>
                <ul class="row4">
                    <li>国画  预招人数：10人</li>
                </ul>
                <ul class="row5">
                    <li>周四 08:00-10:00 舞蹈1+综合排练厅<br/>周五 13:00-14:00 103教室</li>
                </ul>
                <ul class="row6">
                    <li>学员年级段：幼儿 ～ 成人</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>